.song {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 0 0 38px 0;
  .bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    opacity: 1;
    transform-origin: center center;
    filter: blur(50px);
    background-color: #161824;
    background-position: 50%;
    background-repeat: no-repeat;
    // background-size: auto 100%;
    background-size: 50% 50%;
  }

  .playHead {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 2;
    padding: 12px;
    .left {
      svg {
        width: 24px;
        height: 24px;
        fill: #fff;
        transform: rotate(90deg);
      }
    }
    .center {
      text-align: center;
      .musicName {
        color: #fff;
        font-size: 14px;
        font-weight: 700;
      }
      .songName {
        color: #85888f;
        font-size: 12px;
      }
    }
    .right {
      svg {
        width: 24px;
        height: 24px;
        fill: #fff;
      }
    }
  }

  .playPic {
    position: relative;
    flex: 1;
    padding: 24px 0;
    z-index: 2;
    overflow: hidden;
    .song_disc {
      position: relative;
      height: 247px;
      width: 247px;
      margin: 0 auto;
      .song_turn {
        width: 100%;
        height: 100%;
        .song_img_wrap {
          width: 184px;
          height: 184px;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          z-index: 1;
          .img_wrap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }

          .animationState {
            animation: logo-spin infinite 20s linear;
          }
        }
      }
      .song_turn::after {
        content: " ";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 2;
        background: url(//s3.music.126.net/mobile-new/img/disc.png?d3bdd10…=)
          no-repeat;
        background-size: contain;
      }
      .song_btn {
        position: absolute;
        width: 56px;
        height: 56px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        svg {
          width: 56px;
          height: 56px;
          fill: #ffffff;
        }
      }
    }
    .song_disc::after {
      content: " ";
      position: absolute;
      width: 73px;
      height: 118px;
      top: -28px;
      left: 112px;
      transform: rotate(-7deg);
      transform-origin: left top;
      background: url(//s3.music.126.net/mobile-new/img/needle-ab.png?4b81da0…=)
        no-repeat;
      background-size: contain;
      z-index: 2;
    }
  }

  .lyric_container {
    height: 100%;
  }

  .btnFun_wrap {
    position: relative;
    z-index: 1;
    padding: 0 12px;
    display: flex;
    > div {
      flex: 1;
      display: flex;
      justify-content: center;
    }
    .liveBtnItem {
      width: 28px;
      height: 28px;
      svg {
        width: 28px;
        height: 28px;
        // fill: #cecfd1;
        fill: red;
      }
    }
    .dowloadBtnItem {
      width: 28px;
      height: 28px;
      svg {
        width: 28px;
        height: 28px;
        fill: #cecfd1;
      }
    }
    .btnItem {
      width: 28px;
      height: 28px;
      svg {
        width: 28px;
        height: 28px;
        fill: #cecfd1;
      }
    }
    .btnItem,
    .liveBtnItem {
      position: relative;
      .commentNum,
      .liveNum {
        position: absolute;
        top: -5px;
        right: 5px;
        font-size: 12px;
        color: #fff;
        transform: scale(0.8);
        background: rgba(255, 255, 255, 0.6);
        border-radius: 12px;
        padding: 1px 2px;
      }
    }
  }

  .progress_bar {
    position: relative;
    z-index: 2;
    padding: 24px 12px;
    display: flex;
    align-items: center;
    .progressbar_wrap {
      flex: 1;
      margin: 0 6px;
    }
    div {
      color: #a4a5aa;
      font-size: 12px;
    }
  }

  .playBtnWrap {
    position: relative;
    z-index: 2;
    display: flex;
    padding: 0 12px;
    align-items: center;
    > div {
      flex: 1;
      display: flex;
      justify-content: center;
    }
    .btnWrap {
      width: 32px;
      height: 32px;
      svg {
        width: 32px;
        height: 32px;
        fill: #cecfd1;
      }
    }
    .preBtnWrap {
      width: 26px;
      height: 26px;
      svg {
        width: 26px;
        height: 26px;
        fill: #cecfd1;
      }
    }
    .nextBtnWrap {
      width: 32px;
      height: 32px;
      transform: rotate(180deg);
      svg {
        width: 32px;
        height: 32px;
        fill: #cecfd1;
      }
    }
    .playBtnWrap {
      width: 42px;
      height: 42px;
      svg {
        width: 42px;
        height: 42px;
        fill: #e6e6e6;
      }
    }
    .playListWrap {
      width: 24px;
      height: 24px;
      svg {
        width: 24px;
        height: 24px;
        fill: #cecfd1;
      }
    }
  }
}

.loading_wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fbfcfd;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
